{% extends "base.html" %}
{% load static %}

{% block headjs %}
    <style>
        .zoomable-image {
            max-width: 300px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .zoomable-image.zoomed {
            transform: scale(2);
            max-width: none;
        }
    </style>

{% endblock %}

{% block content %}

    <div class="row">
        <div class="col-lg">
            <div class="card">

                <div class="card-body">
                    <h5 class="card-title">{{ object.name }}</h5>

                    <div class="card-body">
                    <div class="card-text row">
                        <div class="col-6">
                             <p>开班时间：{{ object.open_time }}</p>
                             <p>关班时间：{{ object.end_time }}</p>
                         </div>

                        <div class="col-6">
                                 <div class="col">
                                    <button type="button" class="btn btn-primary px-5" data-toggle="modal" data-target="#add_banjixueyuan"><i class="fa fa-address-card mr-1"></i>新学员进班</button>
                                     <a  class="btn px-5 btn-danger" ><i class="fa fa-address-card mr-1"></i>新学员进班</a>
{% include 'messages.html' %}



                                </div>
                            </div>
                        <div class="modal fade" id="add_banjixueyuan" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="add_banjixueyuanLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="add_banjixueyuanLabel">新学员进班</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
        <form  method="post">
      <div class="modal-body">

          {% csrf_token %}

{{ tzzybanjixueyuan }}


      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Understood</button>
      </div>
             </form>
    </div>

  </div>
</div>

                        </div>
                     </div>






<hr>
 <div class="col">
              <ul class="nav nav-pills nav-fill" id="v-pills-tab" role="tablist" aria-orientation="vertical">
          <li class="nav-item">
               <a class="nav-link active show border-bottom" id="v-pills-xueyuan-tab" data-toggle="pill" href="#v-pills-xueyuan" role="tab" aria-controls="v-pills-xueyuan" aria-selected="true">
                   班级学员
               </a>
          </li>
          <li class="nav-item">
              <a class="nav-link border-bottom" id="v-pills-shuoming-tab" data-toggle="pill" href="#v-pills-shuoming" role="tab" aria-controls="v-pills-shuoming" aria-selected="false">
                  班级说明
              </a>
          </li>




        </ul>
 </div>
                     </div>
                    <div class="card-body">


                        <div class="col">
                            <div class="tab-content" id="v-pills-tabContent">
                                <div class="tab-pane fade active show" id="v-pills-xueyuan" role="tabpanel"
                                     aria-labelledby="v-pills-xueyuan-tab">

                                        <div class="row">
                                            <table class="table table-hover border">
									<thead>
										<tr>
											<th scope="col">学员姓名</th>
											<th scope="col">报名时间</th>
											<th scope="col">拿证时间</th>
											<th scope="col">复审时间</th>
                                            <th scope="col">操作</th>
										</tr>
									</thead>
									<tbody>
                                    {% for banji_xueyuan in tzzy_banji_Detail.xueyuan.all %}
										<tr>
											<td>{{ banji_xueyuan.kehu.username }}</td>
											<td>{{ banji_xueyuan.xueyuan_jinbantime }}</td>
											<td>Otto</td>
											<td>@mdo</td>
                                            <td>
                                                <a href="{% url 'tzzy_xueyuan_detail' banji_xueyuan.id  %}" class="btn btn-primary">详情</a>
                                                <a href="" class="btn btn-primary">删除</a>
                                            </td>
										</tr>
                                   {% endfor %}
									</tbody>
								</table>
                                        </div>


                                </div>

                                <div class="tab-pane fade" id="v-pills-shuoming" role="tabpanel" aria-labelledby="v-pills-shuoming-tab">
                                    <div class="card">
                                        <div class="card-body" id="neirong-img-txt">
                                            {{ tzzy_banji_Detail.shouming|safe}}


                                        </div>


                                    </div>
                                </div>


                            </div>
                        </div>




                      </div>
                </div>
            </div>
        </div>
    </div>



{% endblock %}
{% block footerjs %}

<script>
   document.addEventListener('DOMContentLoaded', function() {
            // 选择#neirong-img-txt内的所有img元素
            var images = document.querySelectorAll('#neirong-img-txt img');
            // 给每个img元素添加新的class
            images.forEach(function(image) {
                image.classList.add('new-class');
            });
        });
   //点击图片放大
        document.addEventListener('DOMContentLoaded', function() {
            var images = document.querySelectorAll('#neirong-img-txt img');
            images.forEach(function(image) {
                image.addEventListener('click', function() {
                    // 切换类名来切换放大和正常状态
                    if (image.classList.contains('zoomed')) {
                        image.classList.remove('zoomed');
                    } else {
                        image.classList.add('zoomed');
                    }
                });
            });
        });
    </script>
{% endblock %}
